<template>
  <div class="c-swiper">
    <van-swipe :autoplay="autoplay" :show-indicators="showIndicatiors" @change="onChange">
      <van-swipe-item v-for="(image, index) in img" :key="index">
        <img v-lazy="image" class="c-swiper-img" :style="`height: ${height}px`" />
      </van-swipe-item>
      <div
        class="custom-indicator"
        slot="indicator"
        v-if="showIns"
      >{{ current + 1 }}/ {{imgListLength}}</div>
    </van-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe).use(SwipeItem);
export default {
  name: "Swiper",
  props: {
    img: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 125
    },
    autoplay: {
      type: Number,
      default: 3000
    },
    showIndicatiors: {
      type: Boolean,
      default: true
    },
    showIns: {
      type: Boolean,
      defeault: false
    }
  },
  data() {
    return {
      current: 0
    };
  },
  computed: {
    imgListLength() {
      return this.img.length;
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    }
  }
};
</script>

<style lang="less">
.c-swiper {
  position: relative;
  padding: 5px 0;
  background: #fff;
}
.van-swipe-item {
  text-align: center;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  top: 293px;
  padding: 2px 5px;
  width: 46px;
  height: 26px;
  background: rgba(0, 0, 0, 1);
  border-radius: 13px;
  opacity: 0.4;
  font-size: 13px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 25px;
}
</style>
